<template>
  <!--面包屑导航-->
  <el-row style="margin: 5px 5px;">
    <el-col :span="24">
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>主数据</el-breadcrumb-item>
        <el-breadcrumb-item>工作站</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>
  </el-row>
  <!--查询条件区-->
  <el-row>
    <el-col :span="24">
      <el-form :model="searchWorkstation" inline>
        <el-form-item label="工作站编号">
          <el-input v-model="searchWorkstation.workstationCode" placeholder="请输入工作站编号" />
        </el-form-item>
        <el-form-item label="工作站名称">
          <el-input v-model="searchWorkstation.workstationName" placeholder="请输入工作站名称" />
        </el-form-item>
        <el-form-item label="所在车间名称">
          <el-select v-model="searchWorkstation.workshopName" placeholder="请选择">
            <el-option v-for="item in workshopList" :key="item.workshopId" :label="item.workshopName" :value="item.workshopName">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属工序">
          <el-select v-model="searchWorkstation.processName" placeholder="请选择">
            <el-option v-for="item in processList" :key="item.processId" :label="item.processName" :value="item.processName">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="fetchWorkstationList(searchWorkstation)" type="primary">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
  <!--按钮功能区-->
  <el-row style="margin: 5px 5px;">
    <el-col :span="24">
      <el-button-group>
        <el-button @click="insert" type="primary">
          新增
        </el-button>
        <el-button @click="updateTool" type="success" >
          修改
        </el-button>
        <el-button @click="deleteDevList" type="danger" >
          删除
        </el-button>
      </el-button-group>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="24">
      <el-table :data="pagedData" border stripe style="width: 100%"
                @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column prop="workstationCode" label="工作站编码" width="150">
          <template #default="scope">
            <el-link @click="workstationDetails(scope.row)" type="primary">{{ scope.row.workstationCode }}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="workstationName" label="工作站名称" width="150"></el-table-column>
        <el-table-column prop="workstationAddress" label="工作站地点" width="150"></el-table-column>
        <el-table-column prop="workshopName" label="所在车间名称" width="150"></el-table-column>
        <el-table-column prop="processName" label="工序名称" width="150"></el-table-column>
        <el-table-column prop="enableFlag" label="是否启用" width="120">
          <template #default="scope">
            <el-tag type="success" v-if="scope.row.enableFlag == 'Y'">是</el-tag>
            <el-tag type="danger" v-else-if="scope.row.enableFlag == 'N'">否</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" width="150"></el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="primary" @click="handleEdit(scope.row)">修改</el-button>
            <el-button type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <el-pagination
          style="margin-top: 20px"
          background
          layout="prev, pager, next, total"
          :total="total"
          :page-size="pageSize"
          @current-change="handlePageChange"
      />
    </el-col>
  </el-row>

<el-dialog title="新增工作站" v-model="dialogWorkstationAddVisiable">
  <el-form :model="workstationAddForm" label-width="120px">
    <el-form-item label="工作站编码">
      <el-input v-model="workstationAddForm.workstationCode" placeholder="请输入工作站编码" />
    </el-form-item>
    <el-form-item label="工作站名称">
      <el-input v-model="workstationAddForm.workstationName" placeholder="请输入工作站名称" />
    </el-form-item>
    <el-form-item label="工作站地点">
      <el-input v-model="workstationAddForm.workstationAddress" placeholder="请输入工作站地点" />
    </el-form-item>
    <el-form-item label="所在车间名称">
      <el-select v-model="workstationAddForm.workshopName" placeholder="请选择">
        <el-option v-for="item in workshopList" :key="item.workshopId" :label="item.workshopName" :value="item.workshopName">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="所属工序">
      <el-select v-model="workstationAddForm.processName" placeholder="请选择">
        <el-option v-for="item in processList" :key="item.processId" :label="item.processName" :value="item.processName">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="是否启用">
      <el-select v-model="workstationAddForm.enableFlag" placeholder="请选择">
        <el-option label="是" value="Y"></el-option>
        <el-option label="否" value="N"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="备注">
      <el-input v-model="workstationAddForm.remark" placeholder="请输入备注" />
    </el-form-item>

    <el-footer type="center">
      <el-button @click="dialogWorkstationAddVisiable = false" type="primary">取消</el-button>
      <el-button @click="addWorkstation" type="primary">确定</el-button>
    </el-footer>
  </el-form>
</el-dialog>

  <el-dialog title="修改工作站" v-model="dialogWorkstationEditVisiable">
    <el-form :model="workstationEditForm" label-width="120px">
      <el-form-item label="工作站编码">
        <el-input v-model="workstationEditForm.workstationCode" placeholder="请输入工作站编码" />
      </el-form-item>
      <el-form-item label="工作站名称">
        <el-input v-model="workstationEditForm.workstationName" placeholder="请输入工作站名称" />
      </el-form-item>
      <el-form-item label="工作站地点">
        <el-input v-model="workstationEditForm.workstationAddress" placeholder="请输入工作站地点" />
      </el-form-item>
      <el-form-item label="所在车间名称">
        <el-select v-model="workstationEditForm.workshopName" placeholder="请选择">
          <el-option v-for="item in workshopList" :key="item.workshopId" :label="item.workshopName" :value="item.workshopName">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属工序">
        <el-select v-model="workstationEditForm.processName" placeholder="请选择">
          <el-option v-for="item in processList" :key="item.processId" :label="item.processName" :value="item.processName">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否启用">
        <el-select v-model="workstationEditForm.enableFlag" placeholder="请选择">
          <el-option label="是" value="Y"></el-option>
          <el-option label="否" value="N"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="workstationEditForm.remark" placeholder="请输入备注" />
      </el-form-item>
      <el-divider>工作站资源</el-divider>
      <el-carousel :interval="4000" type="card" height="200px">
        <el-carousel-item >
          <div class="custom-box">
            <div style="display: flex; align-items: center; justify-content: space-between;">
              <span>工装夹具</span>
                <el-button type="primary" @click="addTool">新增</el-button>
            </div>
            <el-divider />
            <el-table :data="tools" height="150px" stripe border>
              <el-table-column prop="toolTypeName" label="类型名称"></el-table-column>
              <el-table-column prop="quantity" label="数量" ></el-table-column>
              <el-table-column label="操作">
                <template #default="scope">
                  <el-button type="danger" size="small" @click="handleDeleteTool(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-carousel-item>

        <el-carousel-item >
          <div class="custom-box">
            <div style="display: flex; align-items: center; justify-content: space-between;">
              <span>人力资源</span>
              <el-button type="primary" @click="addWorker">新增</el-button>
            </div>
            <el-divider />
            <el-table :data="workers" height="150px" stripe border>
              <el-table-column prop="postName" label="岗位名称"></el-table-column>
              <el-table-column prop="quantity" label="数量"></el-table-column>
              <el-table-column label="操作">
                <template #default="scope">
                  <el-button type="danger" size="small" @click="handleDeleteWorker(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-carousel-item>

        <el-carousel-item >
          <div class="custom-box">
            <div style="display: flex; align-items: center; justify-content: space-between;">
              <span>设备资源</span>
              <el-button type="primary" @click="addMachine">新增</el-button>
            </div>
            <el-divider />
            <el-table :data="machines" height="150px" stripe border>
              <el-table-column prop="machineryCode" label="设备编号"></el-table-column>
              <el-table-column prop="machineryName" label="设备名称"></el-table-column>
              <el-table-column prop="quantity" label="数量" ></el-table-column>
              <el-table-column label="操作">
                <template #default="scope">
                  <el-button type="danger" size="small" @click="handleDeleteMachine(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-carousel-item>
      </el-carousel>
      <el-footer type="center">
        <el-button @click="dialogWorkstationAddVisiable = false" type="primary">取消</el-button>
        <el-button @click="editWorkstation" type="primary">确定</el-button>
      </el-footer>
    </el-form>
</el-dialog>

  <el-dialog title="工作站详情" v-model="dialogWorkstationDetailVisible" width="800px">
    <el-form :model="workstationDetailForm" label-width="120px" disabled>
      <el-form-item label="工作站编码">
        <el-input v-model="workstationDetailForm.workstationCode" placeholder="请输入工作站编码" />
      </el-form-item>
      <el-form-item label="工作站名称">
        <el-input v-model="workstationDetailForm.workstationName" placeholder="请输入工作站名称" />
      </el-form-item>
      <el-form-item label="工作站地点">
        <el-input v-model="workstationDetailForm.workstationAddress" placeholder="请输入工作站地点" />
      </el-form-item>
      <el-form-item label="所在车间名称">
        <el-select v-model="workstationDetailForm.workshopName" placeholder="请选择">
          <el-option v-for="item in workshopList" :key="item.workshopId" :label="item.workshopName" :value="item.workshopName">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属工序">
        <el-select v-model="workstationDetailForm.processName" placeholder="请选择">
          <el-option v-for="item in processList" :key="item.processId" :label="item.processName" :value="item.processName">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否启用">
        <el-select v-model="workstationDetailForm.enableFlag" placeholder="请选择">
          <el-option label="是" value="Y"></el-option>
          <el-option label="否" value="N"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="workstationDetailForm.remark" placeholder="请输入备注" />
      </el-form-item>
    </el-form>
    <el-divider>工作站资源</el-divider>
    <el-carousel :interval="4000" type="card" height="200px">
      <el-carousel-item >
        <div class="custom-box">
          <div >工装夹具</div>
          <el-divider />
            <el-table :data="tools" height="150px" stripe border>
              <el-table-column prop="toolTypeName" label="类型名称"></el-table-column>
              <el-table-column prop="quantity" label="数量" ></el-table-column>
            </el-table>
        </div>

      </el-carousel-item>
      <el-carousel-item >
        <div class="custom-box">
          <div>人力资源</div>
          <el-divider />
            <el-table :data="workers" height="150px" stripe border>
              <el-table-column prop="postName" label="岗位名称"></el-table-column>
              <el-table-column prop="quantity" label="数量"></el-table-column>
            </el-table>
        </div>
      </el-carousel-item>
      <el-carousel-item >
        <div class="custom-box">
          <div>设备资源</div>
          <el-divider />
            <el-table :data="machines" height="150px" stripe border>
              <el-table-column prop="machineryCode" label="设备编号"></el-table-column>
              <el-table-column prop="machineryName" label="设备名称"></el-table-column>
              <el-table-column prop="quantity" label="数量" ></el-table-column>
            </el-table>
        </div>
      </el-carousel-item>
    </el-carousel>

    <el-footer type="center">
      <el-button @click="dialogWorkstationAddVisiable = false" type="primary">关闭</el-button>
    </el-footer>
  </el-dialog>

  <el-dialog title="新增工装夹具" v-model="dialogToolAddVisible">
    <el-form :model="tool" label-width="120px">
      <el-form-item label="工装夹具类型">
        <el-select v-model="tool.toolTypeName" placeholder="请选择">
          <el-option v-for="item in fixtureTypeList" :key="item.fixtureTypeId" :label="item.fixtureTypeName" :value="item.fixtureTypeName"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="数量">
        <el-input-number v-model="tool.quantity" :min="1" />
      </el-form-item>
    </el-form>
    <el-footer>
      <el-button type="primary" @click="addToolStation">确定</el-button>
      <el-button @click="dialogToolAddVisible = false">取消</el-button>
    </el-footer>
</el-dialog>

  <el-dialog title="新增人力资源" v-model="dialogWorkerAddVisible">
    <el-form :model="worker" label-width="120px">
      <el-form-item label="岗位哦">
        <el-select v-model="worker.postName" placeholder="请选择">
          <el-option v-for="item in postList" :key="item.postId" :label="item.postName" :value="item.postName"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="数量">
        <el-input-number v-model="worker.quantity" :min="1" />
      </el-form-item>
    </el-form>
    <el-footer>
      <el-button type="primary" @click="addWorkerStation">确定</el-button>
      <el-button @click="dialogWorkerAddVisible = false">取消</el-button>
    </el-footer>
  </el-dialog>

  <el-dialog title="新增设备资源" v-model="dialogMachineAddVisible">
    <el-form :model="machine" label-width="120px">
      <el-form-item label="设备资源名称">
        <el-select v-model="machine.machineryName" placeholder="请选择">
          <el-option v-for="item in typeList" :key="item.deviceTypeId" :label="item.deviceTypeName" :value="item.deviceTypeName"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="数量">
        <el-input-number v-model="machine.quantity" :min="1" />
      </el-form-item>
    </el-form>
    <el-footer>
      <el-button type="primary" @click="addMachineStation">确定</el-button>
      <el-button @click="dialogMachineAddVisible = false">取消</el-button>
    </el-footer>
  </el-dialog>
</template>


<script setup>
import {onMounted, ref} from "vue";
import workshopRequest from "@/api/md/workshop/workshop.js";
import itemRequest from "@/api/md/item/item.js";
import {
  fetchWorkstationList,
  handlePageChange,
  pagedData,
  pageSize,
  total,
  resetSearch
} from "@/api/md/workstation/workstationLogic.js";
import workstationRequest from "@/api/md/workstation/workstation.js";
import {ElMessage, ElMessageBox} from "element-plus";
import deviceTypeRequest from "@/api/device/deviceType.js";
import device from "@/api/device/device.js";
import fixtureType from "@/api/fixture/fixtureType.js";

const dialogWorkstationAddVisiable = ref(false);
const dialogWorkstationEditVisiable = ref(false);
const dialogWorkstationDetailVisible = ref(false);
const dialogToolAddVisible = ref(false);
const dialogWorkerAddVisible = ref(false);
const dialogMachineAddVisible = ref(false);
const workshopList = ref([]);
const processList = ref([]);
const tools = ref([]);
const tool = ref({})
const typeList = ref([])
const workers = ref([]);
const worker = ref({})
const postList = ref([])
const machines = ref([]);
const machine = ref({})
const fixtureTypeList = ref([])

const searchWorkstation = ref({
  workstationCode: '',
  workstationName: '',
  workshopName: '',
  processName: '',
})
const searchDeviceType = ref({
  deviceTypeParenId: "F"
})
const workstationAddForm = ref({})
const workstationEditForm = ref({})
const workstationDetailForm = ref({})
let tempWorkstationId = ref(null)

function addTool(){
  fixtureType.loadFixtureTypeList(" ",1,255,res=>{
    fixtureTypeList.value = res.list
    console.log(fixtureTypeList.value)
  })
  dialogToolAddVisible.value = true
}

function addWorkerStation() {
  worker.value.workstationId = tempWorkstationId.value
  worker.value.postId = postList.value.find(item => item.postName === worker.value.postName).postId
  worker.value.postCode = postList.value.find(item => item.postName === worker.value.postName).postCode
  workstationRequest.insertWorker(worker.value, res => {
    console.log(res)
    if (res.msg == "OK"){
      ElMessage({
        type: "success",
        message: "添加成功"
      })
      dialogWorkerAddVisible.value = false
    }
  })
}

function addWorker(){
  workstationRequest.queryWorkers(" ", res => {
    postList.value = res.data
    dialogWorkerAddVisible.value = true
  })
}

function addToolStation() {
  tool.value.workstationId = tempWorkstationId.value
  tool.value.toolTypeId = fixtureTypeList.value.find(item => item.fixtureTypeName === tool.value.toolTypeName).fixtureTypeId
  tool.value.toolTypeCode = fixtureTypeList.value.find(item => item.fixtureTypeName === tool.value.toolTypeName).fixtureTypeId
  workstationRequest.insertToolWorkstation(tool.value, res => {
    if (res.msg == "OK"){
      ElMessage({
        type: "success",
        message: "添加成功"
      })
      dialogToolAddVisible.value = false
    }
  })

}

function addMachine(){
  deviceTypeRequest.loadDeviceTypeList(searchDeviceType.value, res => {
    typeList.value = res.data
    dialogMachineAddVisible.value = true
  })
}
function addMachineStation(){
  machine.value.workstationId = tempWorkstationId.value
  machine.value.machineryId = typeList.value.find(item => item.deviceTypeName === machine.value.machineryName).deviceTypeId
  machine.value.machineryCode = typeList.value.find(item => item.deviceTypeName === machine.value.machineryName).deviceTypeId
  console.log(machine)
  workstationRequest.addMachine(machine.value,res =>{
    if (res.msg == "OK"){
      ElMessage({
        type: "success",
        message: "添加成功"
      })
      dialogMachineAddVisible.value = false
    }
  })
}

function handleDeleteTool(row) {
  ElMessageBox.confirm('确定要删除该记录吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 用户点击了确定按钮，执行删除操作
    workstationRequest.handleDeleteTool(row.toolTypeId,(data)=>{
      if (data.msg == "OK"){
        ElMessage({
          type: "success",
          message: "删除成功"
        })
        fetchWorkstationList(searchWorkstation.value)
      }
    })
  })
}
function handleDeleteWorker(row){
  ElMessageBox.confirm('确定要删除该记录吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 用户点击了确定按钮，执行删除操作
    workstationRequest.handleDeleteWorker(row.postId,(data)=>{
      if (data.msg == "OK"){
        ElMessage({
          type: "success",
          message: "删除成功"
        })
        fetchWorkstationList(searchWorkstation.value)
      }
    })
  })
}
function handleDeleteMachine(row){
  ElMessageBox.confirm('确定要删除该记录吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 用户点击了确定按钮，执行删除操作
    workstationRequest.handleDeleteMachine(row.machineryId,(data)=>{
      if (data.msg == "OK"){
        ElMessage({
          type: "success",
          message: "删除成功"
        })
        fetchWorkstationList(searchWorkstation.value)
      }
    })
  })
}

function handleDelete(row){
  //弹出提示框
  ElMessageBox.confirm('确定要删除该记录吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 用户点击了确定按钮，执行删除操作
    workstationRequest.deleteWorkshop(row.workstationId, (data) => {
      console.log(data)
      if (data.msg == "OK"){
        ElMessage({
          type: "success",
         message: "删除成功",
        })
        fetchWorkstationList(searchWorkstation.value)

      }
    })
  })
}

function workstationDetails(row) {
  workstationRequest.loadWorkstationList(row,(data)=>{
    workstationDetailForm.value = data.data[0]
    workstationRequest.queryMachines(row.workstationId,(data)=>{
      machines.value = data.data
    })
    workstationRequest.queryTools(row.workstationId,(data)=>{
      tools.value = data.data
    })
    workstationRequest.queryWorkers(row.workstationId,(data)=>{
      workers.value = data.data
    })
    dialogWorkstationDetailVisible.value = true;

  })



  console.log(tools)
  console.log(workers)
  console.log(machines)
}

function editWorkstation(){
  workstationEditForm.value.workshopId = workshopList.value.find(item=>item.workshopName == workstationEditForm.value.workshopName).workshopId
  workstationEditForm.value.workshopCode = workshopList.value.find(item=>item.workshopName == workstationEditForm.value.workshopName).workshopCode
  workstationEditForm.value.processId = processList.value.find(item=>item.processName == workstationEditForm.value.processName).processId
  workstationEditForm.value.processCode = processList.value.find(item=>item.processName == workstationEditForm.value.processName).processCode
  console.log(workstationEditForm.value)

  workstationRequest.updateWorkstation(workstationEditForm.value,(data)=>{
    if(data.msg == "OK"){
      ElMessage.success(data.msg)
      dialogWorkstationEditVisiable.value = false;
      fetchWorkstationList(searchWorkstation.value)
    }else{
      ElMessage.error(data.msg)
    }
  })
}

function handleEdit(row){
  workstationRequest.loadWorkstationList(row,(data)=>{
    workstationEditForm.value = data.data[0]
    tempWorkstationId.value = row.workstationId
    workstationRequest.queryMachines(row.workstationId,(data)=>{
      machines.value = data.data
    })
    workstationRequest.queryTools(row.workstationId,(data)=>{
      tools.value = data.data
    })
    workstationRequest.queryWorkers(row.workstationId,(data)=>{
      workers.value = data.data
    })
    dialogWorkstationEditVisiable.value = true;
  })
}

function addWorkstation(){
  workstationAddForm.value.workshopId = workshopList.value.find(item=>item.workshopName == workstationAddForm.value.workshopName).workshopId
  workstationAddForm.value.workshopCode = workshopList.value.find(item=>item.workshopName == workstationAddForm.value.workshopName).workshopCode
  workstationAddForm.value.processId = processList.value.find(item=>item.processName == workstationAddForm.value.processName).processId
  workstationAddForm.value.locationCode = processList.value.find(item=>item.processName == workstationAddForm.value.processName).locationCode

  console.log(workstationAddForm.value)
  workstationRequest.insertWorkstation(workstationAddForm.value,(data)=>{
    if(data.msg == "OK"){
      ElMessage.success(data.msg)
    }else{
      ElMessage.error(data.msg)
    }
    dialogWorkstationAddVisiable.value = false;
    fetchWorkstationList(searchWorkstation);
  })
}

function insert(){
  dialogWorkstationAddVisiable.value = true;
}

function getWorkshopList(){
  workshopRequest.loadWorkshopList(searchWorkstation,(data)=>{
    workshopList.value = data.data
  })
}
function getProcessList(){
  itemRequest.queryProcessList(null,(data)=>{
    processList.value = data.data
  })
}
onMounted(()=>{
  fetchWorkstationList(searchWorkstation);
  getWorkshopList();
  getProcessList();
})
</script>

<style scoped>
.custom-box {
  border: 1px solid #dcdcdc;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  padding: 20px;
  border-radius: 8px;
  background-color: #FFFFFF; /* 淡蓝色背景 */
}
</style>
